"use client";
import { Menu, Role } from "@prisma/client";
import { roleList } from "@/app/actions/role_action";
import {
  createPerson,
  listPerson,
  updatePerson,
  userDelete,
} from "@/app/actions/user_action";
import XTable from "@/components/x-table";
import type { ColumnType, SearchType } from "@/components/x-table";
import { Button, Form, Input, message, Tag } from "antd";
import { cloneDeep } from "lodash-es";
export default function UserPage() {
  const columns: ColumnType[] = [
    {
      title: "姓名",
      key: "name",
      // width: 100,
      render: (record) => <a>{record.name}</a>,
      formParams: {
        type: "input",
        rules: [
          {
            required: true,
            message: "请输入姓名",
          },
        ],
      },
    },

    {
      title: "密码",
      key: "password",
      formParams: {
        type: "input",
        rules: [
          {
            required: true,
            message: "请输入密码",
          },
        ],
      },
    },

    {
      title: "创建时间",
      key: "createdAt",
      showEdit: false,
    },

    {
      title: "角色",
      key: "roleList",
      render: (text, record) => {
        text = record.roleList
        const item = columns.find((item) => item.key === "roleList");
        const list = item?.formParams?.options;

        if (list && text) {
          return list
            .filter((it) => text.includes(it.value))
            .map((it) => {
              return (
                <Tag color="blue" key={it.value}>
                  {it.label}
                </Tag>
              );
            });
        }

        return text;
      },
      formParams: {
        type: "select",
        mode: "multiple",
        funOption: async () => {
          return new Promise(async (resolve) => {
            const menus = await roleList();
            if (menus.data) {
              let list = menus.data.map((it: Role) => {
                return {
                  value: it.id,
                  label: it.name,
                };
              });
              resolve(list as any);
            } else {
              resolve([]);
            }
          });
        },
        // options: []
      },
    },
  ];
  const searchForm: SearchType[] = [
    {
      label: "姓名",
      value: "con.name",
      type: "input",
    },
    {
      label: "角色",
      value: "roleList",
      type: "select",
      fieldKey: "roleList",
      options: [
        {
          label: "全部",
          value: "",
        },
      ],
    },
  ];
  const modalColums: ColumnType[] = cloneDeep(columns);
  modalColums.splice(2, 1)
  // modalColums.push({
  //   title: "图片",
  //   key: "images",
  //   formParams: {
  //     type: "uploadNum",
  //     rules: [
  //       {
  //         required: true,
  //         message: "请上传图片",
  //       },
  //     ],
  //   },
  // })
  const update = async (data: any) => {
    let params = cloneDeep(data);
    // return {
    //   code:400,
    //   message:"更新失败"
    // }
    const res = await updatePerson(params);
    return res;
  };
  const actionSlot = (record: any) => {
    return <>
      <Button size="small" onClick={() => {
      }}>导出</Button>
    </>
  }



  return (
    <XTable
      update={update}
      getList={listPerson}
      columns={columns}
      searchForm={searchForm}
      create={createPerson}
      deleteItem={userDelete}
      actionSlot={actionSlot}
      actionWidth={200}
      modalColumns={modalColums}
    >
      {/* <XTable.Slot name='header'>
        <div>
          发生的护发素header
        </div>
      </XTable.Slot>
      <XTable.Slot name="form">
        <Form.Item
          name='ceshi_1'
          label='测试'
        >
          <Input></Input>
        </Form.Item>
      </XTable.Slot> */}
    </XTable>
  );
}
